<template>
  <div class="container">
    <normal-title
      title=发表评论
      :back="true"
    ></normal-title>
    <div class="comment">
      <textarea
        class="textarea"
        placeholder="宝贝满足你的期待么？说说你的心得，分享给想买的小伙伴吧～"
        placeholder-class="placeholder-style"
        v-model="commentText"
      ></textarea>
      <div class="row add-pic">
        <div
          class="pre-view"
          v-for="(item,index) in images"
          :key=index
        >
          <img
            :src="host+item"
            mode="aspectFill"
          >
          <div
            @click="delPic(index)"
            class="del-pic"
          >×</div>
        </div>
        <div
          class="btn-add"
          @click="addPic"
        >
          <img
            src="../../images/camera_icon.png"
            mode="aspectFit"
          >
          <div class="imgNum">{{prompt}}</div>
        </div>

      </div>
    </div>
    <div class="slice"></div>
    <div class="grade">
      <div class="row grade-type">
        <div class="grade-title">店铺评分</div>
        <div class="stars">
          <div class="row">
            <img
              @click="levelRow1=index+1"
              v-for="(item,index) in 5"
              :key="index"
              class="star"
              src="../../images/star-nor.png"
              mode="aspectFit"
            >
          </div>
          <div class="row sel">
            <img
              @click="levelRow1=index+1"
              v-for="(item,index) in levelRow1"
              :key="index"
              class="star"
              src="../../images/star-sel.png"
              mode="aspectFit"
            >
          </div>
        </div>
      </div>
      <div class="row grade-type">
        <div class="grade-title">物流服务</div>
        <div class="stars">
          <div class="row">
            <img
              @click="levelRow2=index+1"
              v-for="(item,index) in 5"
              :key="index"
              class="star"
              src="../../images/star-nor.png"
              mode="aspectFit"
            >
          </div>
          <div class="row sel">
            <img
              @click="levelRow2=index+1"
              v-for="(item,index) in levelRow2"
              :key="index"
              class="star"
              src="../../images/star-sel.png"
              mode="aspectFit"
            >
          </div>
        </div>
      </div>
      <div class="row grade-type">
        <div class="grade-title">服务态度</div>
        <div class="stars">
          <div class="row">
            <img
              @click="levelRow3=index+1"
              v-for="(item,index) in 5"
              :key="index"
              class="star"
              src="../../images/star-nor.png"
              mode="aspectFit"
            >
          </div>
          <div class="row sel">
            <img
              @click="levelRow3=index+1"
              v-for="(item,index) in levelRow3"
              :key="index"
              class="star"
              src="../../images/star-sel.png"
              mode="aspectFit"
            >
          </div>
        </div>
      </div>
    </div>
    <bottom-btn
      btnName="提交"
      :tarEvent="submitData"
    />
  </div>
</template>

<script>
import { request } from "@/utils";
import config from "@/config";
import NormalTitle from "@/components/NormalTitle";
import BottomBtn from "@/components/BottomBtn";
export default {
  components: {
    NormalTitle,
    BottomBtn
  },
  data() {
    return {
      host: config.backHost,
      images: [],
      levelRow1: 0,
      levelRow2: 0,
      levelRow3: 0,
      commentText: ""
    };
  },
  computed: {
    prompt() {
      if (this.images.length) {
        return this.images.length + "/3";
      } else {
        return "添加图片";
      }
    }
  },
  methods: {
    addPic() {
      var _this = this;
      if (_this.images.length < 3) {
        wx.chooseImage({
          count: 3,
          sizeType: ["original", "compressed"],
          sourceType: ["album", "camera"],
          success(res) {
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths;
            _this.upload(tempFilePaths);
          }
        });
      }
    },
    upload(path) {
      var _this = this;
      var curImgList = [];
      const TOKEN = wx.getStorageSync("token");
      for (var i = 0; i < path.length; i++) {
        wx.showToast({
          icon: "loading",
          title: "正在上传"
        });
        wx.uploadFile({
          url: config.host + "/v1/comment/upload", // 接口处理在下面有写
          filePath: path[i],
          name: "file",
          header: {
            "Content-Type": "multipart/form-data",
            Authorization: "Bearer " + TOKEN
          },
          formData: {
            file: i
          },
          success: function(res) {
            curImgList.push(res.data);
            var data = JSON.parse(res.data);
            _this.images.push(data.status);
            if (res.statusCode != 200) {
              wx.showModal({
                title: "提示",
                content: "上传失败",
                showCancel: false
              });
            }
          },
          fail: function(e) {
            wx.showModal({
              title: "提示",
              content: "上传失败",
              showCancel: false
            });
          },
          complete: function() {
            wx.hideToast(); // 隐藏Toast
          }
        });
      }
    },
    delPic(index) {
      this.images.splice(index, 1);
    },
    async submitData() {
      var comment = this.commentText.replace(/\s+/g, "");
      if (comment == "" || comment.length < 4) {
        wx.showToast({
          title: "评论内容不能少于4个字",
          icon: "none"
        });
        return;
      }
      if (this.levelRow1 == 0 || this.levelRow2 == 0 || this.levelRow3 == 0) {
        wx.showToast({
          title: "星级评分不能为空哟~",
          icon: "none"
        });
        return;
      }
      var order_id = this.$root.$mp.query.order_id;
      var product_id = this.$root.$mp.query.product_id;
      var data = {
        order_id,
        product_id,
        content: this.commentText,
        image: this.images.join(","),
        comment_level: this.levelRow3,
      };
      var res = await request("/v1/comment", "post", data);
      if (res.data.success) {
        wx.navigateBack({
          delta: 1
        });
      }
    },
    dataInit() {
      this.commentText = "";
      (this.images = []),
        (this.levelRow1 = 0),
        (this.levelRow2 = 0),
        (this.levelRow3 = 0);
    }
  },
  onLoad() {
    this.dataInit();
  },
  mounted() {}
};
</script>

<style>
page {
  height: 100%;
}
.placeholder-style {
  color: #cacaca;
  font-size: 16px;
}
</style>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;

  font-size: 26rpx;
  .row {
    display: flex;
    align-items: center;
  }
  .comment {
    background: #f6f6f6;
    margin-top: 30rpx;
    padding: 25rpx;
    margin: 0 25rpx;
    .textarea {
      width: 100%;
      height: 200rpx;
      // background: red;
      font-size: 30rpx;
      z-index: 0;
    }
    .add-pic {
      margin-top: 25rpx;
      .btn-add {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 140rpx;
        background: #ebebeb;
        width: 140rpx;
        img {
          width: 60rpx;
          height: 60rpx;
        }
        .imgNum {
          font-size: 24rpx;
          color: #909090;
        }
      }
      .pre-view {
        font-size: 0;
        margin-right: 25rpx;
        position: relative;
        img {
          width: 140rpx;
          height: 140rpx;
        }
        .del-pic {
          position: absolute;
          z-index: 5;
          font-size: 40rpx;
          background: rgba(200, 200, 200, 0.5);
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          line-height: 35rpx;
          text-align: center;
          top: 0;
          right: 0;
          color: white;
          margin-right: -20rpx;
          margin-top: -20rpx;
        }
      }
    }
  }
  .slice {
    width: 750rpx;
    height: 20rpx;
    background: #f0f0f0;
    margin: 30rpx 0 60rpx;
  }
  .grade {
    margin: 0 25rpx;
    font-size: 36rpx;
    .grade-type {
      margin-bottom: 50rpx;
      .stars {
        position: relative;
        .sel {
          position: absolute;
          top: 0;
          left: 0;
        }
        .star {
          width: 60rpx;
          height: 60rpx;
          margin-right: 30rpx;
        }
      }
      .grade-title {
        margin-right: 40rpx;
      }
    }
  }
  .btn-fixed {
    width: 750rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 0;
    font-size: 40rpx;
    background: #cdb27e;
  }
}
</style>




